<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>點選時間前三天的過關統計</title>
<link rel="stylesheet" href="<c:url value="/css/sophia.css"/>"> 
<link rel="stylesheet" href="<c:url value="/css/bootstrap.min.css"/>">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- <script src="http://code.highcharts.com/highcharts.js"></script> -->
<script src="<c:url value="/js/highcharts.js"/>"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<script src="<c:url value="/js/bootstrap.min.js"/>"></script>
<style type="text/css">
#loading {
	position:absolute;
	left:50%;
	top:30%;
	
	margin-top:-150px;
	margin-left:-150px;
}</style>
</head>
<body>
<%-- <div id="loading"><img src="<c:url value="/images/countdown1.gif"/>" />     Loading.....  </div> --%>
<div class="table-responsive">
	<table class="table">
		<thead>
		</thead>
		<tbody>
			<tr>
				<td>
					<div id="container" style="width: 1280px; height: 400px; margin: 0 auto"></div>
				</td>
			</tr>
		</tbody>
	</table>
</div>
<div id="tsv" style="display:none"></div>  
<script src="<c:url value="/js/misc.js"/>"></script>
<script>
$(function () {
	var teamNameHome=[], teamNameAway=[];
	appendToDiv(); 
	$(document).ajaxStop(function() {//確認appendToDiv()先執行完，才執行 mainFunction()
		mainFunction();
	});	
	function appendToDiv(){
		final1(); 
	}
	function final1(){
		var url = '<c:url value="/countAllHistoryByTime"/>';
		var i=0; //比賽的紀錄出現順序，主要用於抓取比賽的teamNameAway, teamNameHome
		var child='';	
		child += '過關	歷史\n'; 
		$('#searchMessage').text('以'+'${linkGameTime}'+'為搜尋對象，前三天的熱門過關統計');
 		$.post(url, {
 			'linkGameTime':'${linkGameTime}'
 			},function(data) { //用POST透過countInfoGraph取回的Json型式的值
 				loading();//資料顯示之前的圖示
 				//console.log(data);
			$.each(data, function(key, value) { 
				var type=value['ATS_A'];
				teamNameAway[i] = type.teamNameAway;//取得teamNameAway和teamNameHome, 將在mainFunction()使用
	 			teamNameHome[i] = type.teamNameHome;
				//console.log(i+' AAAway : '+teamNameAway[i]);
				//console.log(i+' Home : '+teamNameHome[i]);
				var time=millisecondToDate(type.gameTime.iLocalMillis)+millisecondToTime(type.gameTime.iLocalMillis); 
				//time = time.substring(5, 16);
				var percent=type.percentage;
				child += time+' '+'4'+'\t'+percent*100+'%'+'\n';

				var type=value['ATS_H'];
				var time=millisecondToDate(type.gameTime.iLocalMillis)+millisecondToTime(type.gameTime.iLocalMillis);
				//time = time.substring(5, 16);
				var percent=type.percentage;
				child += time+' '+'3'+'\t'+percent*100+'%'+'\n';
				
				var type=value['SU_A'];
				var time=millisecondToDate(type.gameTime.iLocalMillis)+millisecondToTime(type.gameTime.iLocalMillis); 
				//time = time.substring(5, 16);
				var percent=type.percentage;
				child += time+' '+'2'+'\t'+percent*100+'%'+'\n';
				
				var type=value['SU_H'];
				var time=millisecondToDate(type.gameTime.iLocalMillis)+millisecondToTime(type.gameTime.iLocalMillis);
				//time = time.substring(5, 16);
				var percent=type.percentage;
				child += time+' '+'1'+'\t'+percent*100+'%'+'\n';
				
				var type=value['SC_H'];
				var time=millisecondToDate(type.gameTime.iLocalMillis)+millisecondToTime(type.gameTime.iLocalMillis);
				//time = time.substring(5, 16);
				var percent=type.percentage;
				child += time+' '+'5'+'\t'+percent*100+'%'+'\n';
				
				var type=value['SC_L'];
				var time=millisecondToDate(type.gameTime.iLocalMillis)+millisecondToTime(type.gameTime.iLocalMillis);
				//time = time.substring(5, 16);
				var percent=type.percentage;
				child += time+' '+'6'+'\t'+percent*100+'%'+'\n';
				
				var type=value['ODD'];
				var time=millisecondToDate(type.gameTime.iLocalMillis)+millisecondToTime(type.gameTime.iLocalMillis);
				//time = time.substring(5, 16);
				var percent=type.percentage;
				child += time+' '+'7'+'\t'+percent*100+'%'+'\n';
				
				var type=value['EVEN'];
				var time=millisecondToDate(type.gameTime.iLocalMillis)+millisecondToTime(type.gameTime.iLocalMillis);
				//time = time.substring(5, 16);
				var percent=type.percentage;
				child += time+' '+'8'+'\t'+percent*100+'%'+'\n';
				
				i +=8;
			});  
			$('#tsv').append(child);
		},
		'json');  
		 /* console.log(child); */ 
	}
	
	//資料顯示出之前的圖示
	function loading(){
		$("#loading").ajaxStart(function(){
			   $(this).show();
			})
			.ajaxStop(function(){
			   $(this).hide();
			});
	}

	function mainFunction(){
		var col = [];
		col[0] = [];
		col[1] = [];
		$.each($('#tsv').text().split('\n'), function(index, row){//取出#tsv下的text資料，並以\n取成row陣列
			/* console.log(row); */
			coldata = row.split('\t');
			if(coldata[0]){
				col[0].push(coldata[0]);
				col[1].push(coldata[1]);
			}
		});
		
	    Highcharts.data({
	        csv: document.getElementById('tsv').innerHTML,
	        itemDelimiter: '\t',
	        parsed: function (columns) {

	            var brands = {},
	                brandsData = [],
	                versions = {},
	                drilldownSeries = [];

	            // Parse percentage strings
	            columns[1] = $.map(columns[1], function (value) {
	                if (value.indexOf('%') === value.length - 1) {
	                    value = parseFloat(value);
	                }
	                return value;
	            });
				
	            var j=0; //用來取teamNameAway, teamNameHome
	            var awayName, homeName;
	            $.each(col[0], function (i, name) {
	                var brand,
	                    version;
	                if(j%8==0){//確認能取到TEAM的值 每八個數字一數
	                	awayName= teamNameAway[j];
		                homeName= teamNameHome[j];
	                	
	                }
	                
					//console.log(name);
	                if (i > 0) {

	                    // Remove special edition notes

	                   // name = name.split(' -')[0];

	                    //console.log(name);

	                    // Split into brand and version
	                    version = name.match(/( [0-9])/);
	                    if (version) {
	                        version = version[0];
	                    }
	                    brand = name.replace(version, '');

	                    // Create the main data
	                    if (!brands[brand]) {
	                        brands[brand] = columns[1][i];
	                    } else {
	                        brands[brand] += columns[1][i];
	                    }
	                    /* console.log(j+": "+homeName);
	                    console.log(j+": "+awayName); */
		
	                    // Create the version data
	                    if (version !== null) {
	                        if (!versions[brand]) {
	                            versions[brand] = [];
	                        }
	                        if(version == 1){
	                        	versions[brand].push(['主隊不讓分<br>(客)'+awayName+'<br>(主)'+homeName, columns[1][i]]);
	                        }else if(version == 2){
	                        	versions[brand].push(['客隊不讓分<br>(客)'+awayName+'<br>(主)'+homeName, columns[1][i]]);
	                        	//console.log(i+' Away : '+awayName);
	                        }else if(version == 3){
	                        	versions[brand].push(['主隊讓分<br>(客)'+awayName+'<br>(主)'+homeName, columns[1][i]]);
	                        }else if(version == 4){
	                        	versions[brand].push(['客隊讓分<br>(客)'+awayName+'<br>(主)'+homeName, columns[1][i]]);
	                        	//console.log(i+' Away : '+awayName);
	                        }else if(version == 5){
	                        	versions[brand].push(['高於總和<br>(客)'+awayName+'<br>(主)'+homeName, columns[1][i]]);
	                        }else if(version == 6){
	                        	versions[brand].push(['低於總和<br>(客)'+awayName+'<br>(主)'+homeName, columns[1][i]]);
	                        }else if(version == 7){
	                        	versions[brand].push(['總分奇數<br>(客)'+awayName+'<br>(主)'+homeName, columns[1][i]]);
	                        }else if(version == 8){
	                        	versions[brand].push(['總分偶數<br>(客)'+awayName+'<br>(主)'+homeName, columns[1][i]]);
	                        }
	                       
	                    }
	                    j++;
	                }

	            });
	            

	           $.each(brands, function (name, y) {
	                brandsData.push({
	                    name: name,
	                    y: y,
	                    drilldown: versions[name] ? name : null
	                });
	            }); 
	            $.each(versions, function (key, value) {
	                drilldownSeries.push({
	                    name: key,
	                    id: key,
	                    data: value
	                });
	            });

	            	// Create the chart
	            	$('#container').highcharts({
	                	chart: {
	                    	type: 'column'
	                	},
	                	title: {
	                    	text: '有賺到錢的投注統計, 2014'
	                	},
	                	subtitle: {
	                    	text: '過關的數目除以當場投注總數, 點擊長柱見投注細節'
	                	},
	                	xAxis: {
	                    	 type: 'category'
	                	}, 
	                	yAxis: {
	                    	title: {
	                        	text: '過關數比例'
	                    	}
	                	},
	                	legend: {
	                    	enabled: false
	                	},
	                	plotOptions: {
	                    	series: {
	                        	borderWidth: 0,
	                        	dataLabels: {
	                            	enabled: false,
	                            	format: '{point.y:.1f}%'
	                        	}
	                    	}
	                	},

	                	tooltip: {
	                    	headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
	                    	pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
	                	},

	                	series: [{
	                    	name: '總和',
	                    	colorByPoint: true,
	                    	data: brandsData
	                	}],
	                	drilldown: {
	                    series: drilldownSeries
	                	}
	            	});//$('#container').highcharts
	        	}
	    	});//Highcharts.data
		
		}//function mainFunction()

	});

</script>

	
	
<div class="alert alert-danger" role="alert" id ="searchMessage"></div>




<button type="button" class="btn btn-default btn-lg" id="goback" >
 		<span class="glyphicon glyphicon-backward"></span> Back
</button>

<script>
	$('#goback').on('click', function(){
		sessionStorage.hasLocated = 'history';
		window.location.href = '<c:url value="/"/>';
	});
</script>

</body>
</html>